<!--
 * @author: 十一
 * @since: 2024-04-06
 * user-list.vue
 * @desc: new page
-->
<template>
  <PageHeader title="广告管理">
    <template v-slot:S1>
      <a-button key="2" @click="getData">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button>
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <a-form layout="inline">
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="formState.nickname" placeholder="昵称查询"> </a-input>
    </a-form-item>
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="formState.phone_number" placeholder="手机号查询">
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="getData">查询</a-button>
    </a-form-item>
  </a-form>
  <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'url'">
        <a-image :src="value" />
      </template>
      <template v-if="column.key === 'type'">
        <a-tag color="#2db7f5">{{ formatDictionaryItem('AD_TYPE', value) }}</a-tag>
      </template>
      <template v-if="column.key === 'position'">
        <a-tag :color="value == 0 ? '#2db7f5' : 'pink'">{{
          formatDictionaryItem('AD_POSITION', value)
        }}</a-tag>
      </template>
      <template v-if="column.key === 'status'">
        <a-tag :color="value == 0 ? '#2db7f5' : 'pink'">{{
          formatDictionaryItem('AD_STATUS', value)
        }}</a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer" @click="handledeleteAd(value)">删除</a-tag>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination @change="changePagination" v-model:current="formState.current" :total="formState.total" :show-total="(total) => `共 ${total} 数据`" style="float: right" />
  <AdComponents ref="adComponents" @childGetData="getData" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue'
import AdComponents from './components/ad-components.vue'
import PageHeader from '@/components/pageHeader.vue'
import type { UnwrapRef } from 'vue'
import { getAdList, deleteAd } from '@/servers/main'
import { message } from 'ant-design-vue'
import { formatDictionaryItem } from '@/utils/common'

interface FormState {
  nickname: string
  phone_number: string
  pageSize: number
}
const formState: UnwrapRef<FormState> = reactive({
  pageSize: 10,
  current: 1,
  total: 0
})
let dataSource = ref([])

const columns = [
  {
    title: '广告',
    dataIndex: 'url',
    key: 'url',
    width: 80
  },
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    width: 80
  },
  {
    title: '广告标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '广告类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center'
  },
  {
    title: '广告位置',
    dataIndex: 'position',
    key: 'position',
    align: 'center'
  },
  {
    title: '广告状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  },
  {
    title: '外链',
    dataIndex: 'link',
    key: 'link',
    align: 'center'
  },
  {
    title: '点击量',
    dataIndex: 'click',
    key: 'click',
    align: 'center'
  },
  {
    title: '背景颜色',
    dataIndex: 'bg_color',
    key: 'bg_color',
    align: 'center'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 140
  }
]
const current = ref(1)
const adComponents = ref()
const drawerOptions = reactive({
  title: '新增广告',
  options: {},
  state: 0
})
// 获取列表
function getData() {
  const { total, ...result } = toRaw(formState)
  getAdList(result).then((response: any) => {
    formState.total = response.result.total
    dataSource.value = response.result.list
  })
}
getData()

// 删除

function handledeleteAd(value: any) {
  deleteAd({ id: value.id }).then((responese: any) => {
    if (responese.code === 200) {
      message.success(responese.message)
      console.log(responese)
      getData()
    } else {
      message.error(responese.message)
    }
  })
}

// 新增编辑
function showDrawer(state: number, value: object) {
  drawerOptions.state = state
  if (state == 0) {
    drawerOptions.title = '新增广告'
    drawerOptions.options = {}
  } else {
    drawerOptions.title = '编辑广告'
    drawerOptions.options = value
  }
  adComponents.value.showDrawer(drawerOptions)
}
</script>

<style lang="less" scoped></style>
